/* 通用背景样式集合 */

/* 主背景样式 - 用于页面底部 */
.bg-main {
  background-image: url("/static/images/bgMain.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

/* 仅使用文本颜色的辅助类 */
.text-theme {
  color: #a18576;
}

/* 背景透明度变体 */
.bg-transparent-light {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: -1;
  }
}

.bg-transparent-dark {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }
}

/* 超出范围的文本省略 */

/* 单行文本省略 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本省略（默认2行） */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3行文本省略 */
.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4行文本省略 */
.text-ellipsis-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 自适应宽度的流式布局 */
.flex-wrap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素之间的间距 */
}

/* 内容自适应宽度的项目 */
.flex-content-item {
  display: inline-flex;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-size: 28rpx;
  color: #a18576;
  max-width: 100%;
  box-sizing: border-box;

  /* 可选：添加边框或阴影 */
  border: 1px solid rgba(161, 133, 118, 0.2);

  /* 可选：避免单个项目太长 */
  &.with-ellipsis {
    max-width: 200rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 主题风格变体 */
.flex-content-item-theme {
  background-color: rgba(161, 133, 118, 0.1);
  color: #a18576;
}

// 公用样式
// 顶部导航
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: transparent !important;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }

  .nav-left,
  .nav-right {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 背景
.main-container {
  background-image: url("/static/images/bgMain.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  position: relative;
}

// 底部渐变
// .main-container::after {
//   content: "";
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   height: 150rpx;
//   background: linear-gradient(
//     to bottom,
//     rgba(255, 255, 255, 0),
//     rgba(255, 255, 255, 1)
//   );
//   pointer-events: none;
// }

// card 点
.category-icon {
  width: 30rpx;
  height: 30rpx;
  background-image: url("/static/images/icon-decoration.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 15rpx;
}

// tab下划线
.tab-underline {
  width: 100%;
  height: 3px;
  background-color: #fec393;
  position: absolute;
  bottom: -6px;
  border-radius: 5px;
  left: 0;
  &.active {
    background-color: #de3630;
  }
}

// 用户数量
.user-count {
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #403b36;
}

// 独立容器
.box-content {
  position: relative;
  margin: 0 30rpx 40rpx;
  border-radius: 20rpx;
  background: linear-gradient(to bottom, #f7d1d5 0, #ffffff 50px);
  display: flex;
  flex-direction: column;
}

.title-icon {
  position: absolute;
  background-image: url(/static/images/bg-title.png);
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 120px;
  padding: 3px 20px 15px;
  top: -16px;
  .title-text {
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
  }
}
.info-content {
  padding: 50rpx 40rpx 20rpx;
  border-radius: 16rpx;
}